<!--
@fucntion: 平台类设备基本情况
-->
<template>
  <el-card style="background-color: #F2F6FC;">
    <el-card style="background-color: #DCDFE6;"> 
      <el-row :gutter="24">
          <el-col :span="6">
            <span>设备总数: {{Adata.TYLSBZSL}}</span>
          </el-col>
          <el-col :span="6">
            <span>总原值: {{Adata.TYLSBZYZ}}(万元)</span>
          </el-col>
          <el-col :span="12">
            <el-date-picker
              v-model="Adata.value"
              type="daterange"
              align="right"
              unlink-panels
              @input="changeRefresh()"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
        </el-row>
    </el-card>
    <el-card>
      <el-card style="background-color: #EBEEF5;"> 
          <el-row :gutter="24">
            <el-col :span="6">
                  <el-select v-model="XLData" placeholder="请选择" filterable clearable> 
                    <el-option
                      v-for="(item,index) in data_LB"
                      :key="index"
                      :label="item.data"
                      :value="item.value">
                      <span style="float: left">{{ item.data }}</span>
                    </el-option>
                  </el-select>
            </el-col>
            <el-col :span="6">
              <span>数量: {{Adata.TYLSBSL}}</span>
            </el-col>
            <el-col :span="6">
              <span>原值: {{Adata.TYLSBYZ}}</span>
            </el-col>
            <el-col :span="6">
              <span>分布科室: {{Adata.TYLSBKS}}</span>
            </el-col>
        </el-row>
      </el-card>
      <el-card style="background-color: #F2F6FC;"> 
        <span style="font-size:14px; float: left">收费情况</span>
      </el-card>
      <el-row :gutter="24">
        <el-col :span="12"> 
          <el-table
            size="mini"
            :data="Adata.PlatformData"
            height="300"
            border
            style="width: 100%">
            <el-table-column
              prop="TYLSBSFXM"
              label="收费项目">
            </el-table-column>
            <el-table-column
              prop="TYLSBSFDJ"
              label="单价">
            </el-table-column>
            <el-table-column
              prop="TYLSBSFDW"
              label="单位">
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
           <el-card>
             <el-card>
              <div>
                <span>全院总收入:{{Adata.ZSR}}元</span>
              </div>
              <div>
                <span>临床科室收入:{{Adata.KSSR}}元</span>
              </div>
              <div>
                <span>租赁收入:{{Adata.ZLSR}}元</span>
              </div>
              <div>
                <span>全院平均月台收入:{{Adata.PJSR}}元</span>
              </div>
             </el-card>
           </el-card>
        </el-col> 
      </el-row>
    </el-card>
  </el-card>
</template>

<script>
//导入echarts
import echarts from "echarts";

export default {
  name: "Detailed",
  data() {
    return {
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近半年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit('pick', [start, end]);
            }
          },{ 
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近三年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365*3);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      dataAttr:[],//柱状图图数据
      XLData:{},
      data_LB:{},//下拉
      Adata:{
        PlatformData:[],
        value:'',
        TYLSBZSL:'',
        TYLSBZYZ:'',
        TYLSBSL:'',
        TYLSBYZ:'',
        TYLSBKS:'',
        ZSR:'',
        KSSR:'',
        ZLSR:'',
        PJSR:'',
      },
    };
  },
  methods: {
    changeRefresh(){
      var me = this;
      this.Refresh();
      me.$message.success("更改时间段成功！");
    },
    //刷新页面
    Refresh() {
      var me = this;
      let url = "/static/data/Currency.json";// /jcJsxxb
      if(url !== "") {
        me.getRequest(url).then(resp => {
            if(resp.status == 200) {
              this.Adata.PlatformData = resp.data.results;
              this.Adata.TYLSBZSL = resp.data.TYLSBZSL;
              this.Adata.TYLSBZYZ = resp.data.TYLSBZYZ;
              this.Adata.TYLSBSL = resp.data.TYLSBSL;
              this.Adata.TYLSBYZ = resp.data.TYLSBYZ;
              this.Adata.TYLSBKS = resp.data.TYLSBKS;
              this.Adata.ZSR = resp.data.ZSR;
              this.Adata.KSSR = resp.data.KSSR;
              this.Adata.ZLSR = resp.data.ZLSR;
              this.Adata.PJSR = resp.data.PJSR;
            }
        });
      }
    },
  },
  created: function() {
    var me = this;

    me.getRequest("/static/data/data_LB.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.data_LB = resp.data.data;
      }
    });

    this.Refresh()
  },
};
</script>

<style lang="scss">
</style>